<template>
  <page-header-wrapper
    :title="false"
    content="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。"
  >
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
      <a-form :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-item label="标题" v-bind="validateInfos.name">
          <a-input v-model:value="form.name" placeholder="给目标起个名字" />
        </a-form-item>
        <a-form-item label="起止日期" v-bind="validateInfos.buildTime">
          <a-range-picker v-model:value="form.buildTime" style="width: 100%" />
        </a-form-item>
        <a-form-item label="目标描述" v-bind="validateInfos.description">
          <a-textarea rows="4" placeholder="请输入你阶段性工作目标" v-model:value="form.description" />
        </a-form-item>
        <a-form-item label="衡量标准" v-bind="validateInfos.type">
          <a-textarea rows="4" placeholder="请输入衡量标准" v-model:value="form.type" />
        </a-form-item>
        <a-form-item label="客户" v-bind="validateInfos.customer">
          <a-input placeholder="请描述你服务的客户，内部客户直接 @姓名／工号" v-model:value="form.customer" />
        </a-form-item>
        <a-form-item label="邀评人">
          <a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
        </a-form-item>
        <a-form-item label="权重">
          <a-input-number :min="0" :max="100" />
          <span> %</span>
        </a-form-item>
        <a-form-item label="目标公开" help="客户、邀评人默认被分享">
          <a-radio-group v-model:value="form.target">
            <a-radio :value="1">公开</a-radio>
            <a-radio :value="2">部分公开</a-radio>
            <a-radio :value="3">不公开</a-radio>
          </a-radio-group>
          <a-form-item v-show="form.target === 2">
            <a-select mode="multiple">
              <a-select-option value="4">同事一</a-select-option>
              <a-select-option value="5">同事二</a-select-option>
              <a-select-option value="6">同事三</a-select-option>
            </a-select>
          </a-form-item>
        </a-form-item>
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button @click="onSubmit" type="primary">提交</a-button>
          <a-button style="margin-left: 8px">保存</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue'
import { useForm } from '@ant-design-vue/use'

export default defineComponent({
  name: 'basicForm',
  setup() {
    const state = reactive({
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } }
    })

    const form = reactive({
      name: '',
      buildTime: [],
      description: '',
      type: '',
      customer: '',
    })

    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: '请输入标题',
        },
      ],
      buildTime: [
        {
          required: true,
          message: '请选择起止日期',
          type: 'array'
        },
      ],
      description: [
        {
          required: true,
          message: '请输入目标描述'
        },
      ],
      type: [
        { required: true, message: '请输入衡量标准' }
      ],
      customer: [
        { required: true, message: '请描述你服务的客户' }
      ]
    })
    const { resetFields, validate, validateInfos } = useForm(form, rulesRef)

    const onSubmit = e => {
      e.preventDefault();
      validate()
        .then(() => {
          console.log(toRaw(form))
        })
        .catch(err => {
          console.log('error', err)
        })
    }

    return {
      ...toRefs(state),
      validateInfos,
      form,
      onSubmit
    }
  }
})
</script>
